<template>
	<view class="box">
		<view class="movie" v-for="item in moviesData" :key="item._id" @click="toDetail(item.id)">
				<image class="img" :src="item.cover" mode=""></image>
			<text>{{item.title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moviesData:[],
				parms:{
					pageSize:21,
					currentPage:1
				}
			}
		},
		created(){
			this.getMoviesData();
		},
		onReachBottom(){
			this.parms.currentPage++;
			this.getMoviesData();
		},
		methods: {
			async getMoviesData(){
				const data = await this.$api.movies.getMovies(this.parms);
				if(data.code){
					this.moviesData = [
						...this.moviesData,
						...data.result.rows
					]
				}
				console.log(this.moviesData);
			},
			toDetail(id){
				uni.navigateTo({
					url:"../detail/detail?id=" + id,
				})
			}
		}
	}
</script>

<style scoped>
.box{
	width: 750rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.movie{
	width: 200rpx;
	margin: 20rpx 0;
}
.img{
	width: 100%;
	height: 250rpx;
	border-radius: 6rpx;
}
</style>
